<template>
  <div class="permission">
    <div class="operate">
      <div style="flex: 0 0 auto">
      <ep-button
          style="margin-left: 15px;"
          @click="
            () => {
              this.handleCancelTwo();
            }
          "
      >返回</ep-button
      >
      <ep-button
          v-if="buttonShow"
          style="margin-left: 15px;"
          @click="
            () => {
              this.manualAddPoint();
            }
          "
      >手动添加点位</ep-button
      >
      </div>
      <div>
        <ep-button
            v-if="buttonShow"
            style="margin-left: 15px;"
            @click="
            () => {
              this.editInspectSet();
            }
          "
        >编辑</ep-button
        >
        <ep-button
            style="margin-left: 10px;"
            icon="export.svg"
            @click="
            () => {
              this.exportExcel();
            }
          "
        >导出</ep-button
        >
      </div>
    </div>
    <div class="ep-table">
      <zh-table
          ref="tableList"
          rowId="roleId"
          :columns="tableColumn"
          :data="tableData"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectAllEvent"
          size="medium"
          height="520px"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
      </zh-table>
    </div>
    <a-modal
        title="督察设置"
        centered
        style="top: 20px"
        width="55%"
        height="100%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <inspect-set-details-form
          ref="inspectSetDetailsForm"
          @handleCancel="handleCancel"
          @handleCancelTwo="handleCancelTwo"
          @showOrHide="showOrHide"
          :set-inspect-data-two="inspectDataChange">
      </inspect-set-details-form>
      <template slot="footer">
        <ep-button @click="handleOk" >确认</ep-button>
        <ep-button @click="handleCancel">取消</ep-button>
      </template>
    </a-modal>

    <a-modal
        title="手动添加点位"
        centered
        style="top: 20px"
        width="35%"
        height="100%"
        destroyOnClose
        v-model="visible2"
        cancelText="关闭"
        @ok="handleOk2"
        @cancel="handleCancel2"
    >
      <inspect-point-manual-add
          ref="inspectPointManualAdd"
          @handleCancel="handleCancel2"
          @showOrHide="showOrHide2"
          :manual-add="manualAdd">
      </inspect-point-manual-add>
      <template slot="footer">
        <ep-button @click="handleOk2" >确认</ep-button>
        <ep-button @click="handleCancel2">取消</ep-button>
      </template>
    </a-modal>

  </div>
</template>

<script>
import {getBatchDict} from "@/services/system/api"
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import InspectSetDetailsForm from "@/pages/system/form/InspectSetDetailsForm";
import InspectPointManualAdd from "@/pages/system/form/InspectPointManualAdd";
export default {
  components:{
    InspectPointManualAdd,
    InspectSetDetailsForm,
  },
  props:{
    resourcesChange:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      filtersData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      inspectSetData:[],
      rules:{},
      dictData: {
        c0303:[],
      },
      queryParam:{
        manageAreas:undefined,
        c0303:'',
        g0201:'',
        b0102:'',
      },
      loading: false,
      selectedRowKeys: [] /*table选中keys*/,
      selectionRows: [] /*table选中records*/,
      tableData: [],
      taskData:[],
      tableColumn: [
        { type: "checkbox", width: 50, fixed: "left", visible: true },
        {
          type: "seq",
          width: 80,
          fixed: "left",
          align: "center",
          title: "序号",
          visible: true,
        },
        {
          field: "g0602Name",
          title: "抽检类型",
          visible: true,
          align: "center",
          width: 150,
        },
        {
          field: "b0101",
          title: "点位ID",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "g0401",
          title: "督察任务信息表ID",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "b0103",
          title: "编号",
          align: "center",
          width: 100,
          visible: true,
        },
        {
          field: "b0102",
          title: "名称",
          align: "center",
          width: 150,
          visible: true,
        },
        {
          field: "b0129Name",
          title: "督察级别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0104Name",
          title: "古系列类别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0105Name",
          title: "文保级别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0106Name",
          title: "时代",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0122",
          title: "县区编码",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "b0123",
          title: "街道编码",
          visible: false,
          align: "center",
          width: 150,
        },
        {
          field: "manageArea",
          title: "管理区域",
          align: "center",
          width: 250,
          visible: true,
        },
        {
          field: "b0113Name",
          title: "是否核销",
          align: "center",
          filters: [],
          width: 120,
          visible: true,
        },
        {
          field: "b0114Name",
          title: "是否安全",
          align: "center",
          filters: [],
          width: 120,
          visible: true,
        },
        {
          field: "b0115Name",
          title: "是否划定保护双线",
          align: "center",
          filters: [],
          width: 180,
          visible: true,
        },
        {
          field: "b0109",
          title: "地址",
          align: "center",
          width: 200,
          visible: true,
        },
        {
          field: "b0117Name",
          title: "省级文保类别",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0118Name",
          title: "省级文保子类",
          align: "center",
          filters: [],
          width: 150,
          visible: true,
        },
        {
          field: "b0121",
          title: "开放时间",
          sortable: true,
          align: "center",
          width: 120,
          visible: true,
        },
        {
          field: "patrolMan",
          title: "点位巡查人",
          align: "center",
          width: 150,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterPatrolManMethod,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {
          field: "dutyDepartment",
          title: "责任单位",
          align: "center",
          width: 120,
          visible: true,
        },
        {
          field: "dutyLeader",
          title: "责任领导",
          align: "center",
          width: 120,
          visible: true,
        },
        {
          field: "inspector",
          title: "督察人",
          align: "center",
          fixed: "right",
          width: 120,
          visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterInspectorMethod,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
          sortable: true,
        },
      ],
      visible: false,
      visible2: false,
      buttonShow:true //编辑相关按钮是否显示
    }
  },

  created() {

  },
  methods: {
    initData(data){
      if(data.g0501){
        this.buttonShow = false
      }
      const param = {}
      param.dictFields = 'c0303,b0104,b0105,b0106,b0113,b0114,b0115,b0117,b0118,b0129'
      this.$http.post(getBatchDict, param).then(res => {
        this.dictData = res.result
        //获取筛选数据
        UnmovableRelics.methods.getFiltersData(this, "tableList");
      })
      this.selectionRows = []
      this.inspectSetData = data
      // this.listQuery()
      this.tableData = data.inspectPointList
    },
    //手动添加点位
    manualAddPoint(){
      this.visible2= true;
      this.$nextTick(() => {
        this.$refs.inspectPointManualAdd.initData(JSON.parse(JSON.stringify(this.inspectSetData)));
      })
    },
    exportExcel(){

    },
    editInspectSet(){
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.inspectSetDetailsForm.initData(this.inspectSetData,true);
      });
    },
    inspectDataChange(data){
      if(this.resourcesChange){
        this.resourcesChange(data)
      }
    },
    manualAdd(data){
      this.tableData = data.inspectPointList
      if(this.resourcesChange){
        this.resourcesChange(data)
      }
    },
    handleCancel() {
      this.visible = false;
    },
    //从该页面编辑督察设置的话，保存完之后需要直接关闭两层子页面
    handleCancelTwo(){
      this.visible = false;
      this.$emit("handleCancel")
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    handleOk() {
      this.$nextTick(() => {
        this.$refs.inspectSetDetailsForm.confirm();
      });
    },
    handleOk2() {
      this.$nextTick(() => {
        this.$refs.inspectPointManualAdd.confirm();
      });
    },
    showOrHide2() {
      this.visible2 = !this.visible2;
    },
    handleCancel2() {
      this.visible2 = false;
    },

    //复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.b0101);
          this.selectionRows = records;
        } else {
          //b0101集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.b0101),
            ...records.map((v) => v.b0101),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消选中时
        let b0101Index = this.selectedRowKeys.indexOf(row.b0101);
        if (b0101Index > -1) {
          //删除取消选中删除指定元素b0101
          this.$delete(this.selectedRowKeys, b0101Index);
        }

        let dataIndex = null;
        for (let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].b0101 == row.b0101) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllEvent({ checked, records, reserves }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.b0101);
          this.selectionRows = records;
        } else {
          //b0101集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.b0101),
            ...records.map((v) => v.b0101),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
        this.selectedRowKeys = reserves.map((v) => v.b0101);
      }
    },
    filterPatrolManMethod({ option, row }) {
      return row.patrolMan.includes(option.data);
    },
    filterInspectorMethod({ option, row }) {
      return row.inspector.includes(option.data);
    },
  }
}
</script>
<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 130px);
  }
}
</style>